<template>
  <div id="category">
    <!-- 标题导航栏 -->
    <nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
    <!-- 内容栏 -->
    <div class="content">
      <!-- 左侧分类菜单 -->
      <tab-menu :categories="categories" @selectItem="selectItem" />
      <!-- 右侧数据 -->
      <!-- 父组件向子组件传递一个数组 -->
      <scroll id="tab-content" :data="[categoryData]" ref="scroll">
        <div>
          <tab-content-category :subcategories="showSubcategory" />
          <tab-control
            :titles="['综合', '新品', '销量']"
            @itemClick="tabClick"
          />
          <goods-list :goods="showCategoryDetail" />
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
//导入顶部标题栏
import NavBar from "components/common/navbar/NavBar";
// 导入左侧菜单栏
import TabMenu from "./childComps/TabMenu";
import TabContentCategory from "./childComps/TabContentCategory";

import TabControl from "components/content/tabControl/TabControl";
import Scroll from "components/common/scroll/Scroll";
import GoodsList from "components/content/goods/GoodsList";
//导入获取分类数据的方法
import {
  getCategroy,
  getSubcategory,
  getCategoryDetail,
} from "network/category";

//导入常量
import { POP, SELL, NEW } from "common/const";
import { tabControlMixin } from "@/common/mixin";
export default {
  name: "Category",
  data() {
    return {
      // 左侧分类菜单数组
      categories: [],
      currentIndex: -1,
      // 对应左侧一个标题右侧对应的数据
      categoryData: {},
    };
  },
  //不能将滚动放在created中，因为组件创建完，并没有把模板挂载上去
  created() {
    //1、请求分类数据
    this._getCategory();

    // 2.监听图片加载完成
    this.$bus.$on("imgLoad", () => {
      this.$refs.scroll.refresh();
    });
  },
  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return {};
      return this.categoryData[this.currentIndex].subcategories;
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return [];
      return this.categoryData[this.currentIndex].categoryDetail[
        this.currentType
      ];
    },
  },
  components: {
    NavBar,
    TabMenu,
    TabControl,
    Scroll,
    TabContentCategory,
    GoodsList,
  },
  mixins: [tabControlMixin],
  methods: {
    // 请求数据的方法
    //请求分类菜单
    _getCategory() {
      getCategroy().then((res) => {
        //1、获取分类数据
        this.categories = res.data.category.list;
        //2、初始化每个类别的子数据
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };
        }

        //3、请求第一个分类数据
        this._getSubcategories(0);
      });
    },

    //请求右侧分类数据
    _getSubcategories(index) {
      this.currentIndex = index;
      //获取每个分类对应子分类的标识
      const maitKey = this.categories[index].maitKey;
      getSubcategory(maitKey).then((res) => {
        this.categoryData[index].subcategories = res.data;
        // 解构对象
        this.categoryData = { ...this.categoryData };
        // 请求详情数据
        this._getCategoryDetail(POP);
        this._getCategoryDetail(SELL);
        this._getCategoryDetail(NEW);
      });
    },

    //请求详情数据
    _getCategoryDetail(type) {
      //1、获取请求相应的minWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      //2、发送请求 传入minallkey 和 type
      getCategoryDetail(miniWallkey, type).then((res) => {
        //3、将获取的数据保存下来
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
      });
    },

    // 事件相应的方法
    // 点击哪一个得到的就是哪个分类菜单的数据
    selectItem(index) {
      // console.log(this.categories[index]);
      this._getSubcategories(index);
    },
  },
};
</script>

<style scpoed>
#category {
  height: 100vh;
}

.nav-bar {
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;

  display: flex;
}

#tab-content {
  height: 100%;
  flex: 1;
}
</style>